<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>写着玩</title>

    <style type="text/css">
        .body {
            background-color: #CCCCCC;
            height: 900;

        }

        #shuxingDiv {
            display: -webkit-flex;
            display: flex;

            background-color: #9D9D9D;
            border: 1px solid #000000;
        }


        #userDiv {
            align-items: center;
            border: 2px solid #00A1D6;
        }

        #monsterDiv {

            align-items: center;
            border: 2px solid #000000;


        }

        #combatLog {
            border: 1px solid #000000;

            background-color: #9D9D9D;
            height: 200px;
            overflow: auto;
            position: relative;
        }
    </style>


</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>


<script>
    //本地地址
    var localhostUrl = "http://localhost:8080/";
    //服务器地址
    //var localhostUrl="http://101.42.48.35/"

    //本地ws地址
    var wsUrl = "192.168.10.6:8080";
    //服务器ws地址
    var wsUrl = "101.42.48.35";

    var user_account = window.localStorage.getItem('user_account');
    var ws;
    var t;

    function onClose() {
        ws.close()
    }

    function timedCount() {

        t = setTimeout("WebSocketTest()", 1000)
    }

    function stopCount() {
        clearTimeout(t)
    }

    function WebSocketTest() {
        document.getElementById("guaiwushuaxinjizhi").innerText = 2;
        document.getElementById("guaiwusiwang").innerText = 3;
        if ("WebSocket" in window) {


            // 打开一个 web socket
            ws = new WebSocket("ws://" + wsUrl + "/xiezhewan/websocket/" + user_account);
            //ws://192.168.2.227:10230/agentWebsocket/serverLog/192.168.1.152/7418/1
            //ws://192.168.2.227:10230/websocket/status_3d893b91add8467681aba9cd00d9d05c
            ws.onopen = () => {
                console.log('怪物加载...');
            }

            ws.onmessage = function (evt) {

                var received_msg = evt.data;
                var json = JSON.parse(received_msg);

                console.log("接收数据：" + received_msg)
                var userlog = document.createElement("p");
                userlog.innerHTML = (json.userLog);
                document.getElementById("combatLog").appendChild(userlog);


                ///打印怪物攻击日志
                var monsterlog = document.createElement("p");
                monsterlog.innerHTML = (json.monsterLog);
                document.getElementById("combatLog").appendChild(monsterlog);
                $("#monsterDiv").show();
                $("#monster_lv").text("怪物等级:" + json.monsterLv);

                if (json.monsterHp <= 0) {
                    $("#monster_HP").text("HP:" + 0);
                } else {
                    $("#monster_HP").text("HP:" + json.monsterHp);
                }


                ///控制滚动条自动落在最下方 持续刷新日志内容
                monsterlog.scrollIntoView();
                monsterlog.scrollIntoView(false);
                monsterlog.scrollIntoView({
                    block: "end"
                });
                monsterlog.scrollIntoView({
                    behavior: "instant",
                    block: "end",
                    inline: "nearest"
                });
                if (document.getElementsByTagName('p').length > 70) {
                    $("#combatLog").html('');
                }


                $("#user_HP").text("HP:" + json.userHp);
                $("#user_MP").text("MP:" + json.userMp);

                //怪物死亡判断
                if (json.flag == 2) {
                    ///更新经验条
                    $("#user_EX").text("EX:" + json.userEx + "/" + json.userUpEx);
                    //显示掉落物品
                    var item = document.createElement("p");
                    item.innerHTML = (json.itemName);
                    document.getElementById("combatLog").appendChild(item);
                    if (json.itemName == "未掉落物品") {

                    } else {
                        getBackItem();
                    }
                    //关闭链接
                    onClose();
                    document.getElementById("guaiwushuaxinjizhi").innerText = 1;

                    document.getElementById("guaiwusiwang").innerText = 2;
                    $("#monsterDiv").hide();

                    //延时调用新的怪物
                    timedCount();

                }
                //角色死亡判断
                if (json.userFlag == 2) {
                    //关闭链接
                    onClose();
                    //停止延时调用任务
                    stopCount();
                    //恢复按钮数据
                    document.getElementById("guaiwushuaxinjizhi").innerText = 1;
                    document.getElementById("guaiwusiwang").innerText = 1;
                    //刷新角色信息
                    getnewuserinfo();
                    $("#combatLog").html('');

                    $("#startcombat").show();
                }
            };

            ws.onclose = () => {
                console.log('回合结束...');
            }
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }

    }


    ///点击操作需要使用document
    $(document).ready(function () {
        var stopcombat;

        $("#startcombat").click(function () {
            $("#startcombat").hide();

            var guaiwushuaxinjizhi = document.getElementById("guaiwushuaxinjizhi").innerHTML;


            if (guaiwushuaxinjizhi == 1) {
                WebSocketTest();
            } else {
                alert("当前怪物还未死亡")
            }


        });

        ///停止刷怪
        $("#endcombat").click(function () {
            //window.location.reload();
            ///关闭定时任务
            //clearInterval(stopcombat);
            var guaiwusiwang = document.getElementById("guaiwusiwang").innerHTML;
            var guaiwushuaxinjizhi = document.getElementById("guaiwushuaxinjizhi").innerHTML;

            if (guaiwusiwang == 2) {
                stopCount();
                document.getElementById("guaiwushuaxinjizhi").innerText = 1;
                document.getElementById("guaiwusiwang").innerText = 1;
                getnewuserinfo();
                $("#combatLog").html('');

                $("#startcombat").show();
            } else if (guaiwushuaxinjizhi == 1) {
                alert("请开启战斗")
            } else {
                alert("怪物未死亡")
            }


        });

    });


    ///自动加载角色数据
    function add() {
        getnewuserinfo();
    }


    ///角色升级接口
    function updateUpLv() {

        $.ajax({
            url: localhostUrl + "xiezhewan/updateUserLv",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            async: false,
            data: JSON.stringify({
                "user_account": window.localStorage.getItem("user_account")

            }),
            success: function (result) {

                var jsons = JSON.parse(JSON.stringify(result));

                var profession;
                if (jsons.code == "00000") {
                    if (jsons.data.user_profession == 1) {
                        profession = "战士";
                        $("#userA").text("攻击力:" + jsons.data.user_A);
                        $("#userP").text("最大攻击:" + jsons.data.user_property);

                    }
                    if (jsons.data.user_profession == 2) {
                        profession = "法师";
                        $("#userM").text("魔攻:" + jsons.data.user_M);
                        $("#userP").text("最大魔攻:" + jsons.data.user_property);
                    }
                    $("#user_HP").text("HP:" + jsons.data.user_HP);
                    $("#user_MP").text("MP:" + jsons.data.user_MP);

                    ///更新经验条
                    $("#user_EX").text("EX:" + jsons.data.user_ex + "/" + jsons.data.user_upex);

                    ///更新等级
                    $("#user_profession").text(profession + "  LV:" +
                        jsons.data.user_lv);

                    //刷新面板;
                    $("#userprofession").text(profession + "  LV:" + jsons.data.user_lv);
                    $("#userHP").text("生命:" + jsons.data.user_HP);
                    $("#userMP").text("魔法值:" + jsons.data.user_MP);
                    $("#userDF").text("防御:" + jsons.data.user_DF);

                } else {

                    alert(jsons.data);

                }
            }
        });

    }


    /**
     * 获取背包控制变量span标签的值， 默认为2（关闭状态）
     * 开启后 值为1 再次点击背包按钮 关闭背包还原span值
     */
    //打开背包
    function openBack() {
        //获取span标签值
        var backSpan = document.getElementById("openOrdown").innerHTML;
        var getProperty = document.getElementById("getProperty").innerHTML;
        if (getProperty == 1) {
            document.getElementById("getProperty").innerText = 2;
        }
        if (backSpan == 2) {
            console.log("背包接收到点击触发开关：打开背包 查询背包物品");
            //设置span标签为1
            document.getElementById("openOrdown").innerText = 1;
            //隐藏战斗日志页面
            $("#combatLogOut").hide();
            $("#userProperty").hide();
            $("#backInfo").show();
            //加载背包内的物品
            getBackItem();
        } else {
            $("#combatLogOut").show();
            $("#backInfo").hide();
            downBack(1);
        }

    }

    //关闭背包
    function downBack(OpenStart) {
        if (OpenStart == 1) {
            console.log("背包接收到点击触发开关：关闭背包  ");
            $("#backItem").html('');
            document.getElementById("openOrdown").innerText = 2;
        }

    }


    //加载背包物品
    function getBackItem() {

        $.ajax({
            url: localhostUrl + "xiezhewan/getBackItem",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            async: false,
            data: JSON.stringify({
                "user_account": window.localStorage.getItem("user_account")

            }),
            success: function (result) {
                var json = JSON.parse(JSON.stringify(result));

                if (json.code == "9999") {
                    alert(json.data);
                } else {
                    var text = "";
                    //渲染背包数据样式
                    for (i = 0; i < json.data.length; i++) {

                        text += "<button class='btn' >" + json.data[i].item_name + "</button>" + ' ';
                    }
                    document.getElementById("backItem").innerHTML = text;

                    btn(json.data);

                }
            }
        });
    }

    //循环绑定点击事件
    function btn(data) {

        var btnArray = document.getElementsByClassName('btn');

        for (var i = 0; i < btnArray.length; i++) {
            btnArray[i].onclick = (function close(j) {
                return function () {

                    getItemInfo(data[j].item_id, data[j].equip)

                }
            })(i);
        }
    }

    //查看单个物品属性
    function getItemInfo(itemid, equip) {
        $("#itemA").show();
        $("#itemM").show();
        $.ajax({
            url: localhostUrl + "xiezhewan/getItemInfo",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            async: false,
            data: JSON.stringify({
                "item_id": itemid

            }),
            success: function (result) {
                var json = JSON.parse(JSON.stringify(result));
                if (json.code == "9999") {
                    console.log("获取信息失败稍后再试...")
                } else {
                    console.log("查看单个物品属性:" + json)
                    $("#item").show();
                    console.log(equip)
                    if (equip == 0) {
                        $("#delete").show();
                        $("#apparel").show();
                        $("#xiexia").hide();
                    } else {
                        $("#delete").hide();
                        $("#apparel").hide();
                        $("#xiexia").show();
                    }

                    //根据装备区分属性
                    document.getElementById("item_profession_span").innerText = json.data.item_profession;
                    document.getElementById("item_id_span").innerText = itemid;
                    //不等于1代表只显示防御类属性
                    if (json.data.moral_type_id == 2 || json.data.moral_type_id == 3 || json.data.moral_type_id == 4) {

                        $("#itemHP").text("生命:" + json.data.property_HP);
                        $("#itemMP").text("魔法值:" + json.data.property_MP);
                        $("#itemDF").text("防御:" + json.data.property_DF);
                        document.getElementById("item_hp_span").innerText = json.data.property_HP;
                        document.getElementById("item_mp_span").innerText = json.data.property_MP;
                        document.getElementById("item_df_span").innerText = json.data.property_DF;

                        $("#itemM").html('');
                        $("#itemA").html('');
                        $("#itemP").html('');
                    } else if (json.data.moral_type_id == 1) {
                        //显示攻击类属性
                        if (json.data.item_profession == 1) {
                            $("#itemDF").html('');
                            $("#itemMP").html('');
                            $("#itemHP").html('');
                            $("#itemM").html('');
                            $("#itemA").text("攻击力:" + json.data.property_A);
                            $("#itemP").text("最大攻击:" + json.data.property_P);
                            document.getElementById("item_p_span").innerText = json.data.property_P;
                            document.getElementById("item_a_span").innerText = json.data.property_A;
                        }
                        if (json.data.item_profession == 2) {
                            $("#itemDF").html('');
                            $("#itemMP").html('');
                            $("#itemHP").html('');
                            $("#itemA").html('');
                            $("#itemM").text("魔攻:" + json.data.property_M);
                            $("#itemP").text("最大魔攻:" + json.data.property_P);
                            document.getElementById("item_p_span").innerText = json.data.property_P;
                            document.getElementById("item_m_span").innerText = json.data.property_M;
                        }
                    }


                }
            }
        });
    }

    //关闭装备属性
    function offItem() {
        $("#item").hide();
    }

    //穿戴装备 与 卸下装备
    $(document).ready(function () {
        $("#apparel").click(function () {
            $("#xiexia").show();
            $("#delete").hide();
            $("#apparel").hide();

            var item_profession_span = document.getElementById("item_profession_span").innerText;
            if (item_profession_span == 1 & user_profession == "法师") {
                alert("职业不符")
                return
            }
            if (item_profession_span == 2 & user_profession == "战士") {
                alert("职业不符")
                return
            }

            var item_id_span = document.getElementById("item_id_span").innerText;
            var start = "A";
            $.ajax({
                url: localhostUrl + "xiezhewan/itemUpOrDown",
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                async: true,
                data: JSON.stringify({
                    "user_account": window.localStorage.getItem("user_account"),
                    "item_id": item_id_span

                }),
                success: function (result) {
                    var json = JSON.parse(JSON.stringify(result));

                    console.log(json)

                    //战斗面板
                    // $("#user_HP").text("HP:" + json.data.user_HP);
                    // $("#user_MP").text("MP:" + json.data.user_MP);


                }
            });
        });
    });


    //卸下装备
    $(document).ready(function () {
        $("#xiexia").click(function () {
            $("#xiexia").hide();
            $("#delete").show();
            $("#apparel").show();

            var item_profession_span = document.getElementById("item_profession_span").innerText;
            var item_id_span = document.getElementById("item_id_span").innerText;
            var start = "X";
            $.ajax({
                url: localhostUrl + "xiezhewan/itemDown",
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                async: true,
                data: JSON.stringify({
                    "user_account": window.localStorage.getItem("user_account"),
                    "item_id": item_id_span

                }),
                success: function (result) {
                    var json = JSON.parse(JSON.stringify(result));

                    console.log(json)
                    ///设置用户信息缓存到本地

                    //战斗面板
                    // $("#user_HP").text("HP:" + json.data.user_HP);
                    // $("#user_MP").text("MP:" + json.data.user_MP);


                }
            });
        });
    });

    //删除装备
    $(document).ready(function () {
        $("#delete").click(function () {
            var truthBeTold = window.confirm("单击“确定”继续。单击“取消”。");

            if (truthBeTold) {

                var start = "D";
                var item_id_span = document.getElementById("item_id_span").innerText;
                $.ajax({
                    url: localhostUrl + "xiezhewan/deleteItem",
                    type: "POST",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    data: JSON.stringify({
                        "user_account": window.localStorage.getItem("user_account"),
                        "item_id": item_id_span,
                        "user_operation": start

                    }),
                    success: function (result) {
                        var json = JSON.parse(JSON.stringify(result));
                        $("#item").hide();
                        if (json.code == "9999") {
                            alert(json.data);
                        } else {

                            var text = "";
                            //渲染背包数据样式
                            for (i = 0; i < json.data.length; i++) {

                                text += "<button class='btn' >" + json.data[i].item_name + "</button>" + ' ';
                            }
                            document.getElementById("backItem").innerHTML = text;

                            btn(json.data);

                        }
                    }
                });

            }

        });
    });

    //查看角色属性
    function getUserProperty() {

        var userproperty = document.getElementById("getProperty").innerHTML;

        var backOpen = document.getElementById("openOrdown").innerHTML;
        if (backOpen == 1) {
            document.getElementById("openOrdown").innerText = 2;
        }
        if (userproperty == 2) {
            $("#userProperty").show();
            $("#combatLogOut").hide();
            $("#backInfo").hide();
            offItem();

            //$("#userEx").text("经验:" + user_ex+"/"+user_upex);
            document.getElementById("getProperty").innerText = 1;
        } else {
            $("#combatLogOut").show();
            $("#backInfo").hide();
            $("#userProperty").hide();

            document.getElementById("getProperty").innerText = 2;
        }
        $.ajax({
            url: localhostUrl + "xiezhewan/getUserProperty",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            data: JSON.stringify({
                "user_account": window.localStorage.getItem("user_account")

            }),
            success: function (result) {
                var json = JSON.parse(JSON.stringify(result));
                console.log(json);
                ///职业 等级
                var profession;
                if (json.data.user_profession == "1") {
                    $("#itemM").hide();
                    $("#userprofession").text("战士" + " LV: " + json.data.user_lv);
                    $("#userP").text("最大攻击:" + json.data.user_property);
                    $("#userA").text("攻击力:" + json.data.user_A);
                }
                if (json.data.user_profession == "2") {
                    $("#itemA").hide();
                    $("#userprofession").text("法师" + " LV: " + json.data.user_lv);
                    $("#userP").text("最大魔攻:" + json.data.user_property);
                    $("#userM").text("魔攻:" + json.data.user_M);
                }


                $("#userHP").text("生命:" + json.data.user_HP);
                $("#userMP").text("魔法值:" + json.data.user_MP);
                $("#userDF").text("防御:" + json.data.user_DF);
            }
        });


    }

    //获取最新角色信息
    function getnewuserinfo() {
        $.ajax({
            url: localhostUrl + "xiezhewan/getUserProperty",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            data: JSON.stringify({
                "user_account": window.localStorage.getItem("user_account")

            }),
            success: function (result) {
                var json = JSON.parse(JSON.stringify(result));
                console.log(json);
                ///职业 等级
                var profession;
                if (json.data.user_profession == "1") {
                    profession = "战士";
                }
                if (json.data.user_profession == "2") {
                    profession = "法师";
                }
                $("#user_profession").text(profession + "  LV:" + json.data.user_lv);
                $("#user_HP").text("HP:" + json.data.user_HP);
                $("#user_MP").text("MP:" + json.data.user_MP);
                $("#user_EX").text("EX:" + json.data.user_ex + "/" + json.data.user_upex);

            }
        });
    }
</script>

<body class="body" onload="add()">
<div id="shuxingDiv">
    <div id="userDiv">
        <p id="user_profession"></p>
        <p id="user_HP">HP:</p>
        <p id="user_MP">MP:</p>
        <p id="user_EX"></p>
    </div>

    <div id="monsterDiv" hidden="hidden">
        <p id="monster_lv"></p>
        <p id="monster_HP"></p>

    </div>

</div>
<!-- <div id="sse">
    <a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div> -->
<button id="startcombat">进入刷怪</button>
<span id="guaiwushuaxinjizhi" hidden="">1</span>
<span id="guaiwusiwang" hidden="">1</span>
<button id="endcombat"
">停止刷怪</button>
<button class=" openBack" onclick="openBack()">背包</button>
<span id="openOrdown" hidden="">2</span>
<button type="button" onclick="getUserProperty()">属性</button>
<span id="getProperty" hidden="">2</span>
<button id="upLv" onclick="updateUpLv()">升级</button>
<div id="combatLogOut">
    战斗日志
    <div id="combatLog" data-spy="scroll" data-target="#navbarExample" data-offset="50" class="scrollspy-example">

    </div>
</div>

<div id="backInfo" hidden>
    背包物品
    <div id="backItem" data-spy="scroll" data-target="#navbarExample" data-offset="50" class="scrollspy-example">

    </div>


    <div id="item" hidden="">
        <span id="item_hp_span" hidden=""></span>
        <span id="item_mp_span" hidden=""></span>
        <span id="item_p_span" hidden=""></span>
        <span id="item_a_span" hidden="" hidden=""></span>
        <span id="item_m_span" hidden="" hidden="" hidden=""></span>
        <span id="item_df_span" hidden=""></span>
        <span id="item_profession_span" hidden=""></span>
        <span id="item_id_span" hidden=""></span>
        <p id="itemHP"></p>
        <p id="itemMP"></p>
        <p id="itemP"></p>
        <p id="itemA"></p>
        <p id="itemM"></p>
        <p id="itemDF"></p>
        <button id="offInfo" onclick="offItem()">关闭</button>
        <button id="apparel">穿戴</button>
        <button id="xiexia" hidden="">卸下</button>
        <button id="delete" hidden="">删除</button>
    </div>
</div>

<div id="userProperty" hidden="">
    <p id="userprofession"></p>

    <p id="userHP"></p>
    <p id="userMP"></p>
    <p id="userA"></p>
    <p id="userM"></p>
    <p id="userP"></p>
    <p id="userDF"></p>
    <p id="userEx"></p>
    <span id="user_wuqi" hidden=""></span>
    <span id="user_shangyi" hidden=""></span>
    <span id="user_xiezi" hidden=""></span>
    <span id="user_xiayi" hidden=""></span>
</div>
</body>
</html>
